講了一推提升效能的 api，那是不是要來認識一下 useMemo 呢。
前面提到的 React.memo & React.PureComponent 都是針對子元件 re-render 的功能。
而 useMemo 是提供給元件一個減少 function 被呼叫次數的 react hook ，每次元件 re-render 時，裡面的 function 也會重新執行一次。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useMemo 是回傳一個被記憶的值：memoizedValue
• computeExpensiveValue(a,b) 是不想每次都被呼叫的複雜計算 function。
• [a,b] 是 dependencies array，用來觸發這個 useMemo 。與 useEffect 相同

// 沒設定 dependency 時，每次有 state 改變 useMemo 就會執行
const memoizedValue = useMemo(() => computeExpensiveValue(a, b));

// 設定 dependency 為空陣列時，只有載入元件時 useMemo 才會執行
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), []);

上述提到的部分可以在 codepen 來實際操作看看喔。

適用情形：
當function（computeExpensiveValue()） 過於複雜時，如果只是個簡單的小計算，其實就沒什麼需要使用 useMemo 來提升效能的必要了。

資料來源：
https://medium.com/手寫筆記/react-optimize-performance-using-memo-usecallback-usememo-a76b6b272df3